<template>
<div class="bh-form-item">
	<label class="bh-form-item__label" :style="labelStyle">{{label}}</label>
	<div class="bh-form-item__content" :style="contentStyle">
		<slot></slot>
	</div>
</div>
</template>

<script>
export default {
	name: 'bh-form-item',
	inject: ['bhForm'],
	props: {
		label: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			visible: true,
		}
	},
	methods: {
		close() {
			this.visible = false;
			this.$emit('close');
		},
	},
	computed: {
		form() {
			let parent = this.$parent;
			return parent;
		},
		labelStyle() {
			const ret = {};
			const labelWidth = this.labelWidth || this.form.labelWidth;
			if (labelWidth) {
				ret.width = labelWidth;
			}
			return ret;
		},
		contentStyle() {
			const ret = {};
			const labelWidth = this.labelWidth || this.form.labelWidth;
			if (labelWidth) {
				ret.marginLeft = labelWidth;
			}
			return ret;
		},
	},
}
</script>
